<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">

		<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
		<title>Bootstrap 101 Template</title>

		<!-- Bootstrap -->
		<link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
		<script src="index.js"></script>
		<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
		<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
		<!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
		
		<style type="text/css">
			
			.showDiv{
				width: 100%;
				position: relative;
				margin-top: 2px;
				margin-bottom: 2px;
			}
			
			.showImage{
				width: 100%;
			}
			
			.showTitle
			{
				position: absolute;
				color: #FFFFFF;
				background: #000000;
				top: 0px;
				z-index: 1;
			}
			
			.bgview
			{
				padding: 15px;
			}
			
		</style>
	
		<script>

		var imageNum = new Array(0,7,5,3)
		
		function tabClick(num) {
			for (var i=1; i<imageNum.length; i++) {
				if (i == num) {
					document.getElementById('d' + i).style.display='block';
					
					jQuery(document).ready(function ( $ ) {
						$("#d"+i).mpmansory(
							{
								childrenClass: 'showDiv', // default is a div
								columnClasses: 'padding', //add classes to items
								breakpoints:{
									lg: 3, 
									md: 4, 
									sm: 6,
									xs: 12
								},
								distributeBy: { order: false, height: false, attr: 'data-order', attrOrder: 'asc' }, //default distribute by order, options => order: true/false, height: true/false, attr => 'data-order', attrOrder=> 'asc'/'desc'
								onload: function (items) {
									//make somthing with items
								} 
							}
						);
					});
				} else {
					document.getElementById('d' + i).style.display='none';
				}
			}
		}
		
		function load() {
			for (var i=1; i<imageNum.length; i++) {
				var view = document.getElementById('d' + i)
				var num = imageNum[i]
				
				for (var j=1; j<=num; j++) {
					var name = i + "/" + j + ".jpg"
					// var img = "<img src=\"" + name + "\" width=\"100%\"/>"
					var div = document.createElement('div')
					div.setAttribute("class", "showDiv")
					view.appendChild(div)
					
					var img = document.createElement("img")
					img.src = name
					// img.setAttribute("width", "100%")
					img.setAttribute("class", "showImage")
					div.appendChild(img)

					var title = document.createElement("h5")
					title.textContent = name
					title.setAttribute("class", "showTitle")
					div.appendChild(title)	
					// (function(name){
					// 	img.onclick = function() {
					// 		return showBigImg(name)
					// 	}
					// })(name);

					// (function(i){
					// 	//var p = i
					// 	img.onclick = function() {
					// 		alert(i);
					// 	}
					// })(i);

					// img.addEventListener('click', showBigImg(name), true)
				}
			}
			document.getElementById('groupID1').onclick();
		}
		
		
// 查看大图
function showBigImg(name){
	$("#imgInModalID").attr("src", name);
	$("#imgModal").modal('show');
	//alert(pictrue +" "+name);
}

	</script>
	</head>
	<body onload="load()">
		<div class="btn-group" role="group" aria-label="..." style="margin: 10px;">
			<button id="groupID1" type="button" class="btn btn-warning" onclick="tabClick(1)">包装</button>
			<button id="groupID2" type="button" class="btn btn-warning" onclick="tabClick(2)">红酒</button>
			<button type="button" class="btn btn-warning" onclick="tabClick(3)">礼品</button>
		</div>

		<div id="container" class="bgview">
			<div id="d1" style="display: block;" class="row">
			</div>
			<div id="d2" style="display: none;" class="row">
			</div>
			<div id="d3"style="display: none;"  class="row">
			</div>
		</div>


		<!-- 显示大图部分 -->
		<div class="modal fade bs-example-modal-lg text-center" id="imgModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
			<div class="modal-dialog modal-lg">
				<!-- style="display: inline-block; width: auto;" -->
				<div class="modal-content">
					<div class="modal-header">
						<button type="button" class="close" data-dismiss="modal" aria-label="Close">
							<span aria-hidden="true">×</span>
						</button>
						<h4 class="modal-title" id="modalLabel"></h4>
					</div>
					<img alt="暂无图片" id="imgInModalID" src="" width="90%">
				</div>
			</div>
		</div>

		<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
		<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
		<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
		
	<script type="text/javascript" src="masonry.js"></script>
	<script type="text/javascript">
		jQuery(document).ready(function ( $ ) {
			$("#container").mpmansory(
				{
					childrenClass: 'd1', // default is a div
					columnClasses: 'padding', //add classes to items
					breakpoints:{
						lg: 3, 
						md: 4, 
						sm: 6,
						xs: 12
					},
					distributeBy: { order: false, height: false, attr: 'data-order', attrOrder: 'asc' }, //default distribute by order, options => order: true/false, height: true/false, attr => 'data-order', attrOrder=> 'asc'/'desc'
					onload: function (items) {
						//make somthing with items
					} 
				}
			);
		});
	</script>
	</body>
</html>
